<template>
  <div>
        <div class="box">
            <div class="heng">
                <div class="lt">&lt;</div>
                <input class="van-search" v-model="value" type="text" placeholder="搜索市/酒店/景点/游记">
            </div>
            <div class="beijing">北京</div>
        </div>
        <div class="zujian">
            <van-grid :border="false" :column-num="5">
                <van-grid-item @click="tiaozhuan" v-for="(v,i) in arr" :key="i" :show-loading="false">
                    <van-image class="image" :src="v.img" />
                    <div>{{v.title}}</div>
                </van-grid-item>
            </van-grid>    
        </div>
        <div class="i">
            <img class="images" src="//s.qunarzz.com/travel/travel_hy2/2019/city_intro.png" alt="">
        </div>
        <div class="text">
            北京位于华北平原北部，坐拥燕山太行山两大山脉，这里不仅仅是首都，更是一座历史与现代，文化与自然风光完美交融的城市。
            作为首都的北京一直向世界展现着她的多样性，皇城根下一砖一瓦描绘着历史的风风雨雨，胡同深处老老少少谈笑间满是市井文化的气息；雄伟壮丽的山脉让你一览众山小，碧波荡漾的大运河勾勒出古都的妆容。现代时尚的CBD就在胡同不远处，这种落差感和多样性是独一无二的。
            主要景点有：
            （1）帝都的中心——天安门广场，在这里能够看到庄严的升旗仪式是每个国人的愿望，在庄严的人民英雄纪念碑前思绪将你带回了那段峥嵘岁月，这里的一切都是共和国的象征。
            （2）活着的历史——紫禁城，紫禁城的美不仅在于建筑风格和历史古玩更在于那曾经住在这里的人发生的事，六百年来的记忆已经融入到了那一抹红墙，一片琉璃瓦之中，来到这里感受历史。
            （3）艺术的乌托邦——798艺术区，这里是工业艺术的天堂，路边随处可见的涂鸦是想象空间的无限放大，场馆里的艺术创作是自由思想在交互碰撞，这里让你看到不一样的北京。
            （4）雄关万里——长城，不到长城非好汉，长城的美不仅在于历史风貌和人文故事，更在于长城带给人们的精神象征。
            （5）运动的魅力——奥林匹克公园、鸟巢、水立方在十多年前牵动了每一位国人的神经，来到这里仿佛还能听到看到运动员们挥汗如雨的身姿，登上不远处的奥林匹克塔还可以将京城美景尽收眼中。
            （6）皇家园林——颐和园，不同于喧闹的北京城，这里的清净仿佛让人忘却世间的烦恼，远处佛香阁传来的经文声飘荡在昆明湖的湖面，南湖岛边悠然地划船体验举世罕见的园林艺术杰作。
        </div>
        <van-row>
            <van-col v-for="(v,i) in index" :key="i" span="6"><span class="name">{{v.text}}</span></van-col>
        </van-row>
        <div class="text1">
            全部攻略
        </div>
        <div class="text2">
            游记攻略
        </div>
        <ul class="list">
            <li class="listLi" v-for="(v,i) in arrone" :key="i">
                <div class="smallbox">
                    <div class="title">{{v.title}}</div>
                    <div class="lovers" style="display:flex;">
                        <div style="height:20px;backgroundcolor:#ccc">{{v.text}}</div>
                        <div style="height:20px;backgroundcolor:#ccc">{{v.text1}}</div>
                        <div style="height:20px;backgroundcolor:#ccc;">{{v.text2}}</div>
                    </div>
                    <div class="smallimg">
                        <div class="imageone"><img style="width:100%;height:100%;border-radius: 50%;" :src="v.smallimg" alt=""></div>
                        <div>{{v.html}}</div>
                    </div>
                </div>
                <div class="bigimg">
                    <img :src="v.img" alt="">
                </div>
            </li>
        </ul>
  </div>
</template>
<script>
import {routes,maple} from '@/api/wangjiaxuan/index.js'
export default {
    data(){
        return {
            value:'',
            arr:[],
            index:[
                {text:"概况"},
                {text:"旅游时机"},
                {text:"紧急求助"},
                {text:"当地节庆"},
                {text:"当地交通"},
                {text:"机场车站"},
            ],
            arrone:[]
        };
    },
    methods:{
        async fun(){
            let data = await routes();
            console.log(data);
            this.arr = data
        },
        async fun1(){
            let ok = await maple();
            console.log(ok);
            this.arrone = ok
        },
        tiaozhuan(){
            this.$router.push('/beijing')
        }
    },
    mounted(){
        this.fun()
        this.fun1()
    }
}
</script>

<style scoped>
    .van-search{
        width: 302px;
        height: 32px;
        margin-top:6.5px ;
        border-radius:30px ;
    }
    .lt{
        width: 45px;
        height: 45px;
        font-size: 35px;
        text-align: center;
    }
    .box{
        height: 290px;
        background-image: url(//img1.qunarzz.com/sight/p0/1411/61/d92ba6a30aa12eb0a9a4a9c82214cb8e.water.jpg_256x160_f46ee4c5.jpg);
        background-repeat: no-repeat;
        background-size:100% 100% ;
    }
    .heng{
        display: flex;
    }
    .beijing{
        margin-top: 150px;
        font-size: 35px;
        line-height: 35px;
        font-weight: bold;
        color: white;
        margin-left: 15px;
    }
    .zujian{
        height: 210px;
        width: 355px;
        background-color: white;
        /* margin: auto; */
        margin: -45px 0 0 10px;
        border-radius:10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        padding-top: 10px;
        font-size: 12px;
        margin-bottom: 20px;
    }
    .images{
        width: 70px;
        height: 16px;
    }
    .i{
        margin: auto;
        text-align: center;
    }
    .text{
        padding-top: 10px;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        width: 335px;
        text-align: center;
        margin: auto;
    }
    .name{
        width: 76px;
        height: 30px;
        display: inline-block;
        background-color: #f5f5f5;
        margin-bottom: 10px;
        border-radius:3px ;
        line-height: 30px;
        font-size: 14px;
    }
    .van-row{
        width: 335px;
        margin: auto;
        text-align: center;
        margin-top:15px;
    }
    .text1{
        text-align: center;
        font-size: 14px;
        height: 26px;
        padding-top: 15px;
        padding-bottom: 10px;
        border-top:1px solid #ccc ;
        border-bottom: 5px solid #ccc ;
    }
    .text2{
        height: 30px;
        font-size: 18px;
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 20px;
        border-bottom: 1px solid #ccc ;
    }
    /* .list{
        width: 375px;
    } */
    .listLi{
        width: 375px;
        height: 105px;
        padding: 20px;
        border-bottom:1px solid #ccc ;
        display: flex;
        /* box-sizing: border-box; */
    }
    .title{
        width: 175px;
        height: 20px;
        margin-bottom: 5px;
        font-size:14px ;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }
    .lovers{
        width: 175px;
        height: 20px;
        margin-bottom: 30px;
    }
    .smallbox{
        width: 175px;
        margin-right: 10px;
    }
    .smallimg{
        width: 175px;
        height: 30px;
        display: flex;
    }
    .bigimg{
        width: 150px;
        height: 105px;
    }
    .bigimg img{
        width: 100%;
        height: 100%;
    }
    .imageone{
        width: 45px;
        height: 30px;
        margin-right: 10px;
    }
    .lovers div{
        margin-right:8px;
        background-color: #ccc;
        font-size: 12px;
        line-height: 20px;
        border-radius: 5px;
    }
</style>